<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="1000" top="100px" destroy-on-close
		@closed="$emit('closed')">
		<el-row :gutter="15">
			<el-col :lg="12">
				<el-form :model="FormData" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="130px">

					<el-form-item label="设备名称" prop="name">
						<el-input v-model="FormData.name" placeholder="请填写设备名称" clearable></el-input>
					</el-form-item>
					<el-form-item label="设备类型" prop="gb28181">
						<el-select v-model="FormData.gb28181">
							<el-option :value="false" label="好望设备"></el-option>
							<el-option :value="true" label="国标设备"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item v-if="userInfo.system" label="所属单位" prop="unit">
						<Unit v-model="FormData.unit" :defaultValue="FormData.unit"></Unit>
					</el-form-item>
					<el-form-item label="所属门店" prop="store">
						<Store v-model="FormData.store" :defaultValue="FormData.store"></Store>
					</el-form-item>
					<el-form-item label="SN" prop="sn">
						<el-input v-model="FormData.sn" placeholder="请填写SN" clearable></el-input>
					</el-form-item>
					<div v-if="FormData.gb28181 == false">
						<el-form-item label="验证码" prop="code">
							<el-input v-model="FormData.code" placeholder="请填写验证码" clearable></el-input>
						</el-form-item>
					</div>
					<div v-if="FormData.gb28181 == true">
						<el-form-item v-if="FormData.gb28181 == true" label="设备用户名" prop="username">
							<el-input v-model="FormData.username" placeholder="大小写字母、数字、特殊字符（-），不能以数字开头"
								clearable></el-input>
						</el-form-item>
						<el-form-item v-if="FormData.gb28181 == true" label="设备密码" prop="password">
							<el-input v-model="FormData.password" placeholder="数字+小写字母+大写字母+特殊字符" clearable></el-input>
						</el-form-item>
						<el-form-item v-if="FormData.gb28181 == true" label="设备描述" prop="description">
							<el-input v-model="FormData.description" type="textarea" placeholder="设备描述"
								clearable></el-input>
						</el-form-item>
						<el-form-item v-if="FormData.gb28181 == true" label="设备注册认证算法" prop="description">
							<el-radio-group v-model="FormData.algorithm">
								<el-radio label="md5">MD5</el-radio>
								<el-radio label="sha256">SHA256</el-radio>
							</el-radio-group>
						</el-form-item>
					</div>
					<!-- <el-form-item label="相机功能" prop="functions">
						<el-input v-model="FormData.functions" type="textarea" placeholder="请填写相机功能"
							clearable></el-input>
					</el-form-item> -->
					<el-form-item label="设备状态" prop="devStatus">
						<el-radio-group v-model="FormData.devStatus" class="ml-4">
							<el-radio :label="true">启用</el-radio>
							<el-radio :label="false">停用</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</el-col>
			<el-col :lg="12">
				<!-- <el-button @click="addLevel" :disabled="channelList.length == 24" class="u-m-b-20">新增通道</el-button> -->
				<!-- <el-tabel :data="channelList" border>
					<el-table-column label="通道号" prop="num"></el-table-column>
					<el-table-column label="通道名" prop="name"></el-table-column>
					<el-table-column label="操作">
						<template #default="scope">
							<el-button type="danger" icon="el-icon-delete" circle class="u-m-l-20"
								@click="deleteLevel(scope.row,index)" />
						</template>
					</el-table-column>
				</el-tabel> -->
				<el-form :model='item' label-position='right' label-width='100px' ref='dynamicForm' :inline='true'
					label-suffix='：'>
					<el-form-item v-for="(item,index) in channelList" :key="index">
						<el-input v-model="item.name" type="text" placeholder="通道名称"
							style='width:30%;margin:0 10px 0 0;' clearable></el-input>
						<el-input v-model="item.tag" type="text" placeholder="别名" style='width:50%;margin:0 10px 0 0;'
							clearable></el-input>
						<el-button type="danger" icon="el-icon-delete" circle class="u-m-l-20"
							@click="deleteLevel(item,index)" />
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<template #footer>
			<el-button @click="visible=false">返 回</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				showAMap: false,
				mode: "add",
				titleMap: {
					add: '新增',
					edit: '编辑',
					show: '查看'
				},
				visible: false,
				isSaveing: false,
				channelList: [],
				//表单数据
				FormData: {
					store: {},
					unit: {},
					sn: null,
					devStatus: true,
					functions: null,
					gb28181: false,
					algorithm: 'md5'
				},
				//验证规则
				rules: {
					gb28181: [{
						required: true,
						message: '请选择设备类型'
					}],
					store: [{
						required: true,
						message: '请选择店面'
					}],
					sn: [{
						required: true,
						message: '请填写SN'
					}],
					name: [{
						required: true,
						message: '请填写设备名称'
					}],
					code: [{
						required: true,
						message: '请填写验证码'
					}],
					functions: [{
						required: true,
						message: '请填写相机功能'
					}],
					devStatus: [{
						required: true,
						message: '请选择状态'
					}],
				},
				unitList: [],
				userInfo: {}
			}
		},
		created() {
			this.userInfo = this.$TOOL.data.get("USER_INFO")
		},
		mounted() {},
		methods: {
			//新增等级
			addLevel() {
				let index = String(this.channelList.length + 1)
				if (this.channelList.length == 24) {
					this.$message('最多只能新增24个通道！')
				} else {
					this.channelList.push({
						name: index,
						tag: '通道' + index,
					})
				}
			},
			// 删除等级
			deleteLevel(item, index) {
				this.channelList.splice(index, 1)
			},
			//显示
			open(mode = 'add') {
				this.mode = mode;
				this.visible = true;
				return this
			},
			//表单提交方法
			async submit() {
				var valid = await this.$refs.dialogForm.validate().catch(() => {})
				if (!valid) {
					return false
				}
				this.isSaveing = true
				this.channelList.forEach(item => {
					if (item.name == '') {
						this.$message('请输入通道名称')
						return
					}
					if (item.tag == '') {
						this.$message('请输入通道别名')
						return
					}
				})
				delete this.FormData.createByName
				console.log(this.FormData)
				let data = {
					store: {
						id: this.FormData.store.id
					},
					unit: {
						id: this.FormData.unit.id
					},
					name: this.FormData.name,
					sn: this.FormData.sn,
					code: this.FormData.code,
					functions: this.FormData.functions,
					devStatus: this.FormData.devStatus,
					username: this.FormData.username,
					password: this.FormData.password,
					description: this.FormData.description,
					algorithm: this.FormData.algorithm,
					gb28181: this.FormData.gb28181,
				}
				if (this.FormData.id) {
					data.id = this.FormData.id
				}
				if (this.channelList.length) {
					data.channels = this.channelList
				}
				const res = await this.$API.api.cam.save.post(data)
				this.isSaveing = false;
				if (res.code == 200) {
					this.$emit('success', this.FormData, this.mode)
					this.visible = false;
					this.$message.success("操作成功")
				} else {
					this.$alert(res.message, "提示", {
						type: 'error'
					})
				}
			},
			//表单注入数据
			setData(data) {
				this.FormData.id = data.id
				this.FormData.name = data.name
				this.FormData.store.name = data.store.name
				this.FormData.store.id = data.store.id
				this.FormData.unit.name = data.unitName
				this.FormData.unit.id = data.unitId
				this.FormData.code = data.code
				this.FormData.sn = data.sn
				this.FormData.functions = data.functions
				this.FormData.devStatus = data.devStatus
				this.FormData.gb28181 = data.gb28181
				if (data.channels.length) {
					data.channels.forEach(item => {
						this.channelList.push({
							name: item.name,
							tag: item.tag
						})
					})
				}
				//可以和上面一样单个注入，也可以像下面一样直接合并进去
				//Object.assign(this.FormData, data)
			}
		}
	}
</script>

<style>
</style>
